<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库上传 · RAG Console</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 text-slate-50 flex items-center justify-center px-4 py-10">
<div class="w-full max-w-4xl bg-white/5 border border-white/10 rounded-[32px] backdrop-blur-xl shadow-[0_25px_80px_rgba(15,23,42,.45)] p-8 space-y-8">
    <header class="text-center space-y-3">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-white/10 rounded-full text-sm tracking-wide text-indigo-200">
            <span class="text-indigo-400 text-lg">📚</span>
            <span>RAG · 知识库上传</span>
        </div>
        <h1 class="text-3xl font-semibold text-white">将文档写入 PgVector</h1>
        <p class="text-slate-300 text-sm">指定标签、上传一个或多个文件，后台会自动切分、写入向量库，并记录标签到 Redis。</p>
    </header>

    <section class="bg-white/5 border border-white/10 rounded-[26px] p-6 space-y-6">
        <div>
            <label for="ragTagInput" class="block text-xs uppercase tracking-[0.4em] text-slate-400 mb-2">知识库标签</label>
            <input id="ragTagInput" type="text" placeholder="例如：demo"
                   class="w-full bg-white/5 border border-white/15 rounded-2xl px-4 py-3 text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
        </div>

        <div>
            <label class="block text-xs uppercase tracking-[0.4em] text-slate-400 mb-2">上传文件</label>
            <label for="fileInput"
                   class="block cursor-pointer bg-white/5 border border-dashed border-white/20 rounded-2xl px-6 py-10 text-center space-y-3 hover:border-indigo-400/60 transition">
                <div class="text-3xl">⬆️</div>
                <p class="text-sm text-slate-300">拖拽或点击选择文件（支持多选）</p>
                <p class="text-xs text-slate-500">content-type: multipart/form-data</p>
            </label>
            <input id="fileInput" type="file" class="hidden" multiple>
            <ul id="fileList" class="mt-4 space-y-2 text-sm text-slate-300"></ul>
        </div>

        <button id="uploadButton"
                class="w-full py-3 rounded-2xl bg-indigo-500 text-white text-sm tracking-wide shadow-lg shadow-indigo-900/40 hover:bg-indigo-400 transition">
            开始上传
        </button>
    </section>

    <section id="statusBox" class="hidden bg-white/5 border border-white/10 rounded-2xl p-4 text-sm"></section>
</div>

<script>
    const ragTagInput = document.getElementById('ragTagInput');
    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');
    const uploadButton = document.getElementById('uploadButton');
    const statusBox = document.getElementById('statusBox');

    fileInput.addEventListener('change', () => {
        fileList.innerHTML = '';
        Array.from(fileInput.files).forEach(file => {
            const li = document.createElement('li');
            li.textContent = `${file.name} · ${(file.size / 1024).toFixed(1)} KB`;
            fileList.appendChild(li);
        });
    });

    uploadButton.addEventListener('click', async () => {
        const ragTag = ragTagInput.value.trim();
        if (!ragTag) {
            showStatus('请填写知识库标签', true);
            return;
        }
        if (!fileInput.files.length) {
            showStatus('请至少选择一个文件', true);
            return;
        }

        const formData = new FormData();
        Array.from(fileInput.files).forEach(file => formData.append('file', file));

        setUploading(true);
        showStatus('上传中，请稍候…');

        try {
            const response = await fetch(`http://localhost:8090/api/v1/rag/file/upload?ragTag=${encodeURIComponent(ragTag)}`, {
                method: 'POST',
                body: formData
            });
            const result = await response.json();
            if (response.ok && result.code === '0000') {
                showStatus(`✅ 上传成功：${result.info || '调用成功'}`);
                fileInput.value = '';
                fileList.innerHTML = '';
            } else {
                throw new Error(result.info || '服务端返回错误');
            }
        } catch (error) {
            showStatus(`❌ 上传失败：${error.message}`, true);
        } finally {
            setUploading(false);
        }
    });

    function setUploading(isUploading) {
        uploadButton.disabled = isUploading;
        uploadButton.classList.toggle('opacity-60', isUploading);
        uploadButton.textContent = isUploading ? '上传中…' : '开始上传';
    }

    function showStatus(message, isError = false) {
        statusBox.textContent = message;
        statusBox.classList.toggle('hidden', false);
        statusBox.classList.toggle('text-rose-300', isError);
        statusBox.classList.toggle('text-emerald-200', !isError);
    }
</script>
</body>
</html>
